<template>
    <!-- 嵌套环形图 -->
    <div class="app-container">
        <el-row :gutter="30" :style="{height: '400px', width: '100%'}">
            <div class="chart" ref="chart" :style="{height:'100%',width:'100%'}"></div>
        </el-row>
    </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '@/views/dashboard/mixins/resize'

export default {
    name: 'ChartPie3',
    mixins: [resize],
    data() {
        return {
            chart: null
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs['chart'], 'macarons')
            this.setOptions(this.chartData)
        },
        setOptions() {
            this.chart.setOption({
                title: {
                    text: '某站点用户访问来源',
                    subtext: '纯属虚构',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item', //触发类型,默认数据触发，可选为:'item' | 'axis'
                    formatter: '{a} <br />{b} : {c}次 ({d}%)' //a:系列名称 b数据项名称 c数值 d（饼图：百分比 | 雷达图：指标名称）
                },
                legend: {
                    orient: 'vertical', //布局方式，默认为水平布局，可选为:'horizontal' | 'vertical'
                    data: ['直接访问', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他'],
                    left: 'left'
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        selectedMode: 'single',
                        //半径，支持绝对值（px）和百分比，百分比计算比：min(width, height) / 2 * 75%,传数组实现环形图，[内半径，外半径]
                        radius: [0, '30%'],
                        avoidLabelOvelap: false,
                        label: {
                            normal: {
                                position: 'inner'
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            }
                        },
                        data: [
                            {
                                value: 335,
                                name: '直接访问',
                                selected: true
                            },
                            {
                                value: 679,
                                name: '营销广告'
                            },
                            {
                                value: 1548,
                                name: '搜索引擎'
                            }
                        ]
                    },
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['40%', '55%'],
                        data: [
                            {value:335, name:'直接访问'},
                            {value:310, name:'邮件营销'},
                            {value:335, name:'联盟广告'},
                            {value:335, name:'视频广告'},
                            {value:335, name:'百度'},
                            {value:335, name:'谷歌'},
                            {value:335, name:'必应'},
                            {value:335, name:'其他'},
                        ]
                    }
                ]
            });
        }
    }
}
</script>